<template>
  <div class="mobile-page-container">
    <visual-page
      v-if="!loading"
      :pageId="pageId"
      :inputParam="inputParam"
    />
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";
import { useRoute } from 'vue-router';
import VisualPage from "@/mobile/view/page.vue";

const route = useRoute();
const pageId = ref();
const inputParam = ref({});
const loading = ref(true);

watch(() => route.params?.pageId, value => {
  loading.value = true;
  pageId.value = value;
  inputParam.value = route.query || {};
  nextTick(() => loading.value = false);
}, {immediate: true});
</script>

<style scoped>
.mobile-page-container {
  box-sizing: border-box;
  height: 100%;
}
</style>